<template>
    <div class="pay-order">
      <p class="close-time">订单关闭时间 12:45</p>
      <h4 class="money-num">￥156.00</h4>
      <div class="pay-group">
        <h4>选择支付方式</h4>
        <group>
          <radio   v-model="radio001Value" :options="radio003" @on-change="change"></radio>
        </group>
        <x-button class="submit-btn">确定支付</x-button>
      </div>
    </div>
</template>

<script>
  import { Radio, Group ,XButton} from 'vux'

    export default {
        name: "pay-order",
        metaInfo () {
          return {
            title: '支付订单'
          }
        },
        data(){
          return {
            radio001Value:'',
            radio003: [{
              icon: '../../../static/images/appoint/weixin.png',
              key: '0',
              value: '微信支付'
            }, {
              icon: '../../../static/images/appoint/zhifubao.png',
              key: '1',
              value: '支付宝支付'
            }]
          }
        },
        methods: {
          change (value, label) {
            console.log('change:', value, label)
          }
        },
        components: {
          Radio,
          Group,
          XButton
        },
    }
</script>

<style  lang="scss">
    .pay-order{
        .close-time{
          font-size:12px;
          font-family:PingFang-SC-Regular;
          color:rgba(122,122,122,1);
          margin:38px 0 25px;
          text-align: center;
        }
      .money-num{
        font-size:24px;
        font-family:PingFang-SC-Bold;
        color:rgba(232,14,14,1);
        text-align: center;
      }
      .pay-group{
        padding:0 30px;
        h4{
          font-size:15px;
          font-family:PingFang-SC-Regular;
          color:rgba(122,122,122,1);
          margin:50px 0 20px;
          font-weight: normal;
        }
        .weui-cells{
          &:before{
            border-top: none;
          }
          &:after{
            border-bottom:none;
          }
          .weui-cell{
            &:before{
              border-top:none;
            }
            .vux-radio-label{
              font-size:15px;
              font-family:PingFang-SC-Regular;
              color:rgba(38,38,38,1);
            }
          }
          .weui-check__label:active{
            background-color:#fff;
          }
        }
        .weui-cells_radio .weui-check:checked + .weui-icon-checked:before{
          content: "\EA06";
          color: #EF6E6E;
        }
        .submit-btn{
          background:rgba(246,96,96,1);
          border-radius:24px;
          font-size:17px;
          font-family:PingFang-SC-Regular;
          color:rgba(255,255,255,1);
          margin-top:30px;
          width:90%;
        }
      }
    }
</style>
